<template>
  <div>
    <h2>电子产品</h2>
    <ul>
      <li v-for="item in list" :key="item.name">
        {{ item.name }} - ¥{{ item.price }}
      </li>
    </ul>
    <h2>食品</h2>
    <ul>
      <li v-for="item in foods" :key="item.name">
        {{ item.name }} - ¥{{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { name: '手机', price: 3999 },
  { name: '耳机', price: 599 }
]);

const foods = ref([
  { name: '面包', price: 10 },
  { name: '牛奶', price: 8 }
]);
</script>

<style scoped>
</style>